<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <header>
        <div id="div_top">
            <main>
                <h2>欢迎光临当当，请登录成为会员</h2>
                <ul>
                    <li><a href="javascript:;">购物车1</a></li>
                    <li><a href="javascript:;">我的订单</a></li>
                    <li><a href="javascript:;">原创征文</a></li>
                    <li><a href="javascript:;">手机当当</a></li>
                    <li><a href="javascript:;">我的当当</a></li>
                    <li><a href="javascript:;">企业采购</a></li>
                    <li><a href="javascript:;">客户服务</a></li>
                </ul>
            </main>
        </div>
        <div id="div_center">
            <main>
                <img src="../images/guanggao.PNG" alt="">
            </main>
        </div>
        <div id="div_bottom">
            <main>
                <img src="../images/logo.PNG" alt="">
                <img src="../images/buzou.PNG" alt="">
            </main>
        </div>
    </header>

    <div id="peisong">
        <main>
            <img src="../images/peisong.PNG" alt="">
        </main>
    </div>

    <div id="tishi">
        <main>
            <img src="../images/1_03.jpg" alt="">
            <p>您还没有登录!登录后购物车的商品将保存到您的帐号中</p>
            <div>立即登录</div>
        </main>
    </div>

    <div id="gouwuche">
        <div class="header">
            <ul>
                <li>
                    <input type="checkbox" name="quanxuan"> 全选
                </li>
                <li>商品信息</li>
                <li>单价(元)</li>
                <li>数量</li>
                <li>金额(元)</li>
                <li>操作</li>
            </ul>
        </div>
        <div class="div1">
            <input type="checkbox">
            <img class="img1" src="../images/10_03.jpg" alt="">
            <span>当当自营</span>
        </div>
        <div class="content">
            <ul>
                <li>
                    <input type="checkbox" name="xuanzk">
                </li>
                <li>
                    <div class="box">
                        <img class="img6" src="../images/book.PNG" alt="">
                        <p>锋利的jQuery(第2版)(畅销书升级版，增加jQuery Mobile和性能优化)</p>
                    </div>
                </li>
                <li>￥<span>34.60</span></li>
                <li>
                    <button>-</button>
                    <button>1</button>
                    <button>+</button>
                </li>
                <li>￥<span>34.60</span></li>
                <li>
                    <h2>移入收藏</h2>
                    <h2>删除</h2>
                </li>
            </ul>
            <ul>
                <li>
                    <input type="checkbox" name="xuanzk">
                </li>
                <li>
                    <div class="box">
                        <img class="img6" src="../images/book.PNG" alt="">
                        <p>锋利的jQuery(第2版)(畅销书升级版，增加jQuery Mobile和性能优化)</p>
                    </div>
                </li>
                <li>￥<span>34.60</span></li>
                <li>
                    <button>-</button>
                    <button>1</button>
                    <button>+</button>
                </li>
                <li>￥<span>34.60</span></li>
                <li>
                    <h2>移入收藏</h2>
                    <h2>删除</h2>
                </li>
            </ul>
        </div>
        <div class="dianpu">
            <div class="left">店铺合计</div>
            <div class="right">￥<span>69.20</span></div>
        </div>
        <div class="footer">
            <ul>
                <li>
                   <input type="checkbox"> 全选
                </li>
                <li>批量删除</li>
                <li>已选择<span>0</span>件商品</li>
                <li>总计(不含运费)：￥<span>34.60</span></li>
                <li><img src="../images/allcount.PNG" alt=""></li>
            </ul>
        </div>
    </div>

    <section>
        <h2>买过购物车中商品的用户还买了</h2>
        <main>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg1.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>9999</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg2.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>118.20</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg3.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg4.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg5.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>55.10</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
    
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg1.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>66.40</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg2.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>118.20</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg3.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg4.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg5.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>55.10</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <img class="imgL" src="../images/anniu.PNG" alt="">
            <img class="imgR" src="../images/anniu2.PNG" alt="">
        </main>
        <main class="main1" style="display: none;">
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg31.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>66.40</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg32.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>118.20</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg33.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg4.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg5.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>55.10</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
    
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg1.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>66.40</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg2.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>118.20</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg3.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg4.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>41.70</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <div class="box">
                <div class="div3">
                    <img class="img3" src="../images/bg5.png" alt="">
                    <div class="tj">添加到购物车</div>
                </div>
                <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
                <h4>￥<span>55.10</span></h4>
                <img src="../images/collect.PNG" alt="">
            </div>
            <img class="imgL" src="../images/anniu.PNG" alt="">
            <img class="imgR" src="../images/anniu2.PNG" alt="">
        </main>
    </section>
    <section>
        <h2>推广商品</h2>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg35.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>66.40</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg36.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>118.20</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/box14img03.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>41.70</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/box14img04.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>41.70</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg36.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>55.10</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <img class="imgL" src="../images/anniu.PNG" alt="">
        <img class="imgR" src="../images/anniu2.PNG" alt="">
    </section>
    <section>
        <h2>为你推荐</h2>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg1.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>66.40</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg2.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>118.20</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg3.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>41.70</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg4.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>41.70</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <div class="box">
            <div class="div3">
                <img class="img3" src="../images/bg5.png" alt="">
                <div class="tj">添加到购物车</div>
            </div>
            <p>JavaScript高级程序设计(第3版)(JavaScript技术名著，</p>
            <h4>￥<span>55.10</span></h4>
            <img src="../images/collect.PNG" alt="">
        </div>
        <img class="imgL" src="../images/anniu.PNG" alt="">
        <img class="imgR" src="../images/anniu2.PNG" alt="">
    </section>
    <footer>
        <main>
            <img src="../images/footer.PNG" alt="">
        </main>
    </footer>
    <script src="../js/index.js"></script>
</body>
</html>